<template>
    <div class="panel-main">
        <div class="panel-row">
            <div><span style="color: red">*&nbsp;</span>地图名称：</div>
            <Input :value="model?.name" class="panel-input" @change="change($event, 'name')"/>
        </div>
        <div class="panel-row">
            <div><span style="color: red">*&nbsp;</span>地图类型：</div>
            <Select :value="model?.type" @change="change($event, 'type', 'select')">
                <SelectOption v-for="(item, index) in mapTypes"
                              :key="index" :value="item.code">
                    {{item.name}}
                </SelectOption>
            </Select>
        </div>
        <div class="panel-row">
            <div>备注</div>
            <Textarea :value="model?.remark"  @change="change($event, 'remark')"/>
        </div>
    </div>
</template>
<script>
    import {Input, Select, SelectOption, Textarea} from "ant-design-vue";
    import {Dictionary} from "../../../utils/Dictionary"
    export default {
        name: 'App',
        props: {
            selectedShape: Object
        },
        computed: {
            isDictionary() {
                return this.$store.state.dictionary;
            }
        },
        watch: {
            selectedShape: {
                handler: function (shape) {
                    this._initValue(shape);
                },
                deep: true
            },
            isDictionary(data) {
                this._mapType(data);
            }
        },

        components: {
            Input,
            Select,
            SelectOption,
            Textarea
        },

        data() {
            return {
                model: {
                    name: '',
                    type: '',
                    remark: '',
                },
                width: '',
                height: '',
                mapTypes: []
            }
        },

        mounted() {
            this._mapType(this.$store.state.dictionary);
            this._initValue(this.selectedShape);
        },

        methods: {
            change(e, key, type) {
                switch (type) {
                    case 'input':
                        this.setValue(e.target.value, key);
                        break;
                    case 'checkbox':
                        this.setValue(e.target.checked, key);
                        break;
                    case 'select':
                        this.setValue(e, key);
                        break;
                    default:
                        this.setValue(e.target.value, key);
                        break;
                }
                if(this.selectedShape.itemId){
                    const item = this.selectedShape.graph.findById(this.selectedShape.itemId);
                    this.$emit('change', item.getModel());
                } else {
                    this.selectedShape.graph.map = this.model;
                }
            },

            setValue(value, key) {
                if (key === 'width' || key === 'height') {
                    this[key] = value;
                    this.model.size[key === 'width' ? 0 : 1] = parseInt(value);
                } else {
                    this.model[key] = value
                }
            },

            /**
             * 查找地图类型
             * @param data
             * @private
             */
            _mapType(data) {
                this.mapTypes = data.filter(item => item.code === Dictionary.MAP_TYPE)
                    .map(item => item.children)[0]
            },

            /**
             * 初始值
             * @param shape
             * @private
             */
            _initValue(shape){
                if(shape){
                    const item = shape.itemId ? shape.graph.findById(shape.itemId) : null;
                    this.model = item ? item.getModel() : shape.graph.map;
                }
            }
        }
    }
</script>
<style scoped lang="scss">

</style>
